<template>
  <div class="countent">
    <el-menu :default-active="activePath" router class="el-menu-vertical-demo container-table101" @open="handleOpen"
      @close="handleClose">
      <el-menu-item :index="item.name" v-for="(item, i) in navList" :key="i" @click="getIndex(i)">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.navItem }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        navList: [{
            icon: "iconfont iconYYSZ_icon_Ad_selected",
            name: "/createApp",
            navItem: "新建应用"
          },
          {
            icon: "iconfont iconAPPpackage_recording",
            name: "/createMsg",
            navItem: "新建记录"
          }
        ],
        activePath: "/createApp" //绑定高亮
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },

      // 获取当前页
      getIndex(index) {
        console.log(index);
        sessionStorage.setItem("acount_detailInfo", index);
        this.$emit("handleClick", index);
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      // 页面加载默认选中哪个界面
      let index = sessionStorage.getItem("acount_detailInfo");
      // console.log(this.$route.name);
      if (this.$route.name == "agency") {
        index = 2;
      }
      // console.log(index);
      if (index == 0) {
        this.activePath = "/createApp";
      }
      if (index == 1) {
        this.activePath = "/createMsg";
      }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      // this.activePath = '/detailInfo'
    }
  };

</script>
<style scoped>
  /* .countent {
    width: 100%;
    height: 100%;
  } */

  /* 图标 */
  i {
    color: black;
  }

  i .is-active {
    color: #fff;
  }

  .el-menu-item.is-active {
    background-color: #ff7226;
    color: #fff;
  }

  .el-menu-item.is-active:hover {
    background-color: #ff7226;
  }

  .el-menu-item:hover {
    outline: 0;
    background-color: #ffede3;
  }

  .el-menu-item span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 500;
    line-height: 16px;
  }

  .el-menu-item {
    text-align: center;
  }

  div>>>.el-menu {
    border-right: 0;
  }

  .el-menu-vertical-demo.container-table101.el-menu {
    background-color: rgba(30, 30, 30, 0.8);
    border-right: 1px solid #272727;
  }

  .container-table100 {
    width: 100%;
    /* min-height: 100vh; */
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .container-table101 {
    width: 100%;
    min-height: 80vh;
    border-radius: 4px 0px 0px 4px;
  }

  .el-menu-vertical-demo.container-table101.el-menu .el-menu-item i.iconfont {
    color: #fff;
  }

  .el-menu-vertical-demo.container-table101.el-menu .el-menu-item:hover {
    background-color: #ccc;
  }

  .el-menu-vertical-demo.container-table101.el-menu .el-menu-item span {
    color: #fff;
  }

</style>
